<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--====================================================
                         MAIN NAVBAR
======================================================-->
    <header class="header" th:fragment="topbar">
            <nav class="navbar navbar-expand-lg ">
                <div class="search-box">
                    <button class="dismiss"><i class="icon-close"></i></button>
                    <form id="searchForm" action="#" role="search">
                        <input type="search" placeholder="Search Now" class="form-control">
                    </form>
                </div>
                <div class="container-fluid ">
                    <div class="navbar-holder d-flex align-items-center justify-content-between">
                        <div class="navbar-header">
                            <a href="index.html" class="navbar-brand">
                                <div class="brand-text brand-big hidden-lg-down"><img src="img/logo-white.png" th:src="@{/model1/img/logo-white.png}" alt="Logo" class="img-fluid"></div>
                                <div class="brand-text brand-small"><img src="img/logo-icon.png" th:src="@{/model1/img/logo-icon.png}" alt="Logo" class="img-fluid"></div>
                            </a>
                            <a id="toggle-btn" href="#" class="menu-btn active">
                                <span></span>
                                <span></span>
                                <span></span>
                            </a>
                        </div>
                    </div>
                    <ul class="nav-menu list-unstyled d-flex flex-md-row align-items-md-center">
                        <!-- Search-->
                        <li class="nav-item d-flex align-items-center"><a id="search" class="nav-link" href="#"><i class="icon-search"></i></a></li>

                        <li class="nav-item dropdown"><a id="profile" class="nav-link logout" data-target="#" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><img src="img/avatar-1.jpg" th:src="@{/model1/img/avatar-1.jpg}" alt="..." class="img-fluid rounded-circle" style="height: 30px; width: 30px;"></a>
                            <ul aria-labelledby="profile" class="dropdown-menu profile">
                                <li>
                                    <a rel="nofollow" href="#" class="dropdown-item d-flex">
                                        <div class="msg-profile"> <img src="img/avatar-1.jpg" th:src="@{/model1/img/avatar-1.jpg}" alt="..." class="img-fluid rounded-circle"></div>
                                        <div class="msg-body">
                                            <h3 class="h5">Shop Manager</h3>
                                        </div>
                                    </a>
                                    <hr>
                                </li>
                                <li>
                                    <a rel="nofollow" href="#" class="dropdown-item">
                                        <div class="notification">
                                            <div class="notification-content"><i class="fa fa-user "></i>My Profile</div>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a rel="nofollow" href="#" class="dropdown-item">
                                        <div class="notification">
                                            <div class="notification-content"><i class="fa fa-envelope-o"></i>Inbox</div>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a rel="nofollow" href="#" class="dropdown-item">
                                        <div class="notification">
                                            <div class="notification-content"><i class="fa fa-cog"></i>Setting</div>
                                        </div>
                                    </a>
                                    <hr>
                                </li>
                                <li>
                                    <a rel="nofollow" href="javascript:void(0);"  onclick="logout()" class="dropdown-item">
                                        <div class="notification">
                                            <div class="notification-content"><i class="fa fa-power-off"></i>Logout</div>
                                        </div>
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <!--<li class="nav-item d-flex align-items-center"><a id="menu-toggle-right" class="nav-link" href="#"><i class="fa fa-bars"></i></a></li>-->
                        <!--<nav id="sidebar-wrapper">-->
                            <!--<div class="sidebar-nav">-->
                                <!--<div class="tab" role="tabpanel">-->
                                    <!--<ul class="nav nav-tabs" role="tablist">-->
                                        <!--<li class="nav-item ">-->
                                            <!--<a class="nav-link active" href="#live" role="tab" data-toggle="tab"><i class="fa fa-globe"></i> Live</a>-->
                                        <!--</li>-->
                                        <!--<li class="nav-item">-->
                                            <!--<a class="nav-link" href="#trend" role="tab" data-toggle="tab"><i class="fa fa-rocket"></i> Trending</a>-->
                                        <!--</li>-->
                                    <!--</ul>-->
                                    <!--<div class="tab-content tabs">-->
                                        <!--<div role="tabpanel" class="tab-pane fade show active" id="live">-->
                                            <!--<h3>Connect Live</h3>-->
                                            <!--<div class="content newsf-list">-->
                                                <!--<ul class="list-unstyled">-->
                                                    <!--<li class="border border-primary">-->
                                                        <!--<a rel="nofollow " href="#" class=" d-flex">-->
                                                            <!--<div class="news-f-img"> <img src="img/avatar-2.jpg" alt="..." class="img-fluid rounded-circle"></div>-->
                                                            <!--<div class="msg-body">-->
                                                                <!--<h6 class="h5 msg-nav-h6">New Innovation world</h6>-->
                                                                <!--<small>Tech soft is great innovation for...</small>-->
                                                            <!--</div>-->
                                                        <!--</a>-->
                                                    <!--</li>-->
                                                    <!--<li class="border border-success">-->
                                                        <!--<a rel="nofollow" href="#" class=" d-flex">-->
                                                            <!--<div class="news-f-img"> <img src="img/avatar-3.jpg" alt="..." class="img-fluid rounded-circle"></div>-->
                                                            <!--<div class="msg-body">-->
                                                                <!--<h6 class="h5 msg-nav-h6">Modified hand-cart</h6>-->
                                                                <!--<small>The idea is to incorporate easy...</small>-->
                                                            <!--</div>-->
                                                        <!--</a>-->
                                                    <!--</li>-->
                                                    <!--<li class="border border-info">-->
                                                        <!--<a rel="nofollow" href="#" class=" d-flex">-->
                                                            <!--<div class="news-f-img"> <img src="img/avatar-4.jpg" alt="..." class="img-fluid rounded-circle"></div>-->
                                                            <!--<div class="msg-body">-->
                                                                <!--<h6 class="h5 msg-nav-h6">Low cost Modern printer</h6>-->
                                                                <!--<small>A dot matrix printer modified at...</small>-->
                                                            <!--</div>-->
                                                        <!--</a>-->
                                                    <!--</li>-->
                                                    <!--<li class="border border-primary">-->
                                                        <!--<a rel="nofollow" href="#" class=" d-flex">-->
                                                            <!--<div class="news-f-img"> <img src="img/avatar-1.jpg" alt="..." class="img-fluid rounded-circle"></div>-->
                                                            <!--<div class="msg-body">-->
                                                                <!--<h6 class="h5 msg-nav-h6">Low cost Modern printer</h6>-->
                                                                <!--<small>A dot matrix printer modified at...</small>-->
                                                            <!--</div>-->
                                                        <!--</a>-->
                                                    <!--</li>-->
                                                    <!--<li class="border border-success">-->
                                                        <!--<a rel="nofollow" href="#" class=" d-flex">-->
                                                            <!--<div class="news-f-img"> <img src="img/avatar-2.jpg" alt="..." class="img-fluid rounded-circle"></div>-->
                                                            <!--<div class="msg-body">-->
                                                                <!--<h6 class="h5 msg-nav-h6">Low cost Modern printer</h6>-->
                                                                <!--<small>A dot matrix printer modified at...</small>-->
                                                            <!--</div>-->
                                                        <!--</a>-->
                                                    <!--</li>-->
                                                    <!--<li class="border border-info">-->
                                                        <!--<a rel="nofollow" href="#" class=" d-flex">-->
                                                            <!--<div class="news-f-img"> <img src="img/avatar-3.jpg" alt="..." class="img-fluid rounded-circle"></div>-->
                                                            <!--<div class="msg-body">-->
                                                                <!--<h6 class="h5 msg-nav-h6">Low cost Modern printer</h6>-->
                                                                <!--<small>A dot matrix printer modified at...</small>-->
                                                            <!--</div>-->
                                                        <!--</a>-->
                                                    <!--</li>-->
                                                <!--</ul>-->
                                            <!--</div>-->
                                        <!--</div>-->
                                        <!--<div role="tabpanel" class="tab-pane fade" id="trend">-->
                                            <!--<div class="card card-c2" style="box-shadow: 0 0 0;">-->
                                                <!--<div class="header">-->
                                                    <!--<h3 class="title">Trending Items</h3>-->
                                                    <!--<p class="category">Last Campaign Performance</p>-->
                                                <!--</div>-->
                                                <!--<div class="content">-->
                                                    <!--<canvas class="ct-chart" id="myChart4" height="250"></canvas>-->
                                                    <!--<div class="footer">-->
                                                        <!--<div class="legend">-->
                                                            <!--<i class="fa fa-circle text-info"></i> Open-->
                                                            <!--<i class="fa fa-circle text-danger"></i> Bounce-->
                                                            <!--<i class="fa fa-circle text-warning"></i> Unsubscribe-->
                                                        <!--</div>-->
                                                        <!--<hr>-->
                                                        <!--<div class="stats">-->
                                                            <!--<i class="fa fa-clock-o"></i> Campaign sent 2 days ago-->
                                                        <!--</div>-->
                                                    <!--</div>-->
                                                <!--</div>-->
                                            <!--</div>-->
                                        <!--</div>-->
                                    <!--</div>-->
                                <!--</div>-->
                        <!--</nav>-->
                    </ul>
                </div>
            </nav>
        </header>
<!--====================================================
                         SIDE NAVBAR
======================================================-->
    <nav class="side-navbar" th:fragment="sidebar">
        <div class="sidebar-header d-flex align-items-center">
            <div class="avatar"><img src="img/avatar-1.jpg" th:src="@{/model1/img/avatar-1.jpg}" alt="..." class="img-fluid rounded-circle"></div>
            <div class="title">
                <h1 class="h4">Shop Manager</h1>
            </div>
        </div>
        <hr>
        <!-- Sidebar Navidation Menus-->
        <ul class="list-unstyled">
            <li th:class="${activeUri=='index'?'active':''}"> <a href="#" th:href="@{/admin/index.do}" ><i class="icon-home"></i>首页</a></li>
            <li th:class="${activeUri=='product_mng'?'active':''}"><a href="#product_mng" aria-expanded="false" data-toggle="collapse"><i class="icon-check"></i>商品管理</a>
                <ul id="product_mng" class="collapse list-unstyled">
                    <li><a href="#" th:href="@{/admin/product.do}">商品管理</a></li>
                </ul>
            </li>
            <li th:class="${activeUri=='category_mng'?'active':''}"><a href="#category_mng" aria-expanded="false" data-toggle="collapse"><i class="icon-interface-windows"></i>分类管理</a>
                <ul id="category_mng" class="collapse list-unstyled">
                    <li><a href="#" th:href="@{/admin/tag.do}">分类管理</a></li>
                </ul>
            </li>
            <!--<li th:class="${activeUri=='people_mng'?'active':''}"><a href="#people_mng" aria-expanded="false" data-toggle="collapse"><i class="icon-user"></i>人事管理</a>-->
                <!--<ul id="people_mng" class="collapse list-unstyled">-->
                    <!--<li><a href="#" th:href="@{/admin/people.do}">人事管理</a></li>-->
                <!--</ul>-->
            <!--</li>-->

        </ul><span class="heading">Extras</span>
        <ul class="list-unstyled">
            <li> <a href="#"> <i class="icon-picture"></i>Demo </a></li>
        </ul>
    </nav>
</body>
</html>